<template>
  <!-- dialog窗口 用于添加和编辑的弹窗-->
  <el-dialog :title="dialogTitle" @close="dialogClose" :visible="dialogVisible">
    <el-form :model="stuForm" :rules="stuRules" ref="addStuRuleForm">
      <el-form-item label="头像">
        <el-upload
          class="uploadAvatar"
          ref="uploadAvatar"
          action="https://chst.vip/students/uploadStuAvatar"
          list-type="picture-card"
          :on-success="uploadSuccess"
          :on-remove="removeAvatar"
          :limit="limit"
          name="headimgurl"
          :file-list="headimgList"
          :multiple="false"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="stuForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="项目地址" prop="productUrl">
        <el-input v-model="stuForm.productUrl" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="班级" prop="class">
        <el-input v-model="stuForm.class" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="stuForm.age" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="stuForm.city" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学历" prop="degree">
        <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="描述" prop="description">
        <el-input v-model="stuForm.description" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="HIDE_DIALOG">取 消</el-button>
      <el-button type="primary" @click="confirmClick('addStuRuleForm')"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
//引入发起请求的api
import * as api from '@/api/student'

export default {
  computed: {
    ...mapState(['dialogVisible', 'dialogTitle', 'currentRow'])
  },
  data() {
    return {
      showAvatar: true, // 显示头像
      headimgList: [], //回显的头像
      limit: 1, //上传文件的数量
      stuRules: {
        name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
        class: [{ required: true, message: '请输入班级', trigger: 'blur' }],
        degree: [{ required: true, message: '请输入学历', trigger: 'blur' }],
        city: [{ required: true, message: '请输入城市', trigger: 'blur' }],
        productUrl: [
          { required: true, message: '请输入项目地址', trigger: 'blur' }
        ],
        age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
        description: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ]
      },
      // 表单数据
      stuForm: {
        name: '',
        productUrl: '',
        headimgurl: '',
        class: '',
        age: '',
        city: '',
        degree: '',
        description: ''
      },
      oldFrom: {}, //储存stuForm的初始值,便于后续清空dialog内容
      count: 0 // 监听表单修改
    }
  },
  created() {
    //储存stuForm的初始值,便于后续清空dialog内容
    this.oldFrom = { ...this.stuForm }
  },
  methods: {
    ...mapMutations(['SHOW_DIALOG', 'HIDE_DIALOG', 'CHANGE_DIALOG_TITLE']),
    // 图片上次成功
    uploadSuccess(r) {
      console.log(r)
      // 把返回来的图片网络地址, 添加给stuForm 传给服务器 保持到数据库
      if (r.state) {
        // 头像上传成功
        this.stuForm.headimgurl = r.headimgurl
        // 编辑学员信息的时候才替换
        if (this.dialogTitle === '编辑学员信息') {
          // 把 headimgList 列表内容设置为当前项
          this.headimgList = [{ url: r.headimgurl }]
        }
      } else {
        this.$message.error('上传失败')
      }
    },
    // 移除当前图片
    removeAvatar(r) {},
    // 点击确定表单校验
    confirmClick(formName) {
      this.$refs[formName].validate(valid => {
        // console.log(valid)
        if (valid) {
          // 表达校验成功
          // 关闭dialog
          this.HIDE_DIALOG()
          // 发送请求  如何知道点击确定的时候, 此时点击的增加按钮还是编辑按钮
          // 判断dialogTitle
          if (this.dialogTitle === '增加学员信息') {
            // 发起增加学员请求
            // console.log(this.stuForm)
            api.addStu(this.stuForm).then(res => {
              console.log(res)
              if (res.data.state) {
                // 增加成功
                this.$message.success('添加成功')
                // 重新发起请求更新表格内容
                this.$store.dispatch('GET_STULIST')
                // 重置表单数据
                this.stuForm = {}
              } else {
                // 增加失败
                this.$message.error('增加失败')
                // 重置表单数据
                this.stuForm = {}
              }
            })
          } else {
            // 发起编辑学员请求
            api.updateStu(this.stuForm).then(res => {
              // console.log(res)
              if (res.data.state) {
                // 修改成功, 更新视图
                // 初始化监听修改的次数
                this.count = 0
                this.$message.success('更新成功')
                this.$store.dispatch('GET_STULIST')
              } else {
                if (this.count <= 1) {
                  // 更新失败, 比如你在更新的时候这条数据被别人删除了
                  this.$message.warning('没用做任何修改')
                  // 更新页面数据
                  this.$store.dispatch('GET_STULIST')
                  // 初始化监听修改的次数
                  this.count = 0
                  return
                }
                // 更新失败, 比如你在更新的时候这条数据被别人删除了
                this.$message.error('更新失败,当前数据不存在')
                // 更新页面数据
                this.$store.dispatch('GET_STULIST')
                // 初始化监听修改的次数
                this.count = 0
              }
            })
          }
        } else {
          this.$message.error('请将内容填写完整')
        }
      })
    },
    // dialog关闭时触发的回调
    dialogClose() {
      // 隐藏dialog
      this.HIDE_DIALOG()
      // 清空输入框的值
      this.stuForm = this.oldFrom
      // 清空回显头像的数组
      this.headimgList = []
      // 关闭的时候让上传个数变为1
      this.limit = 1
    }
  },
  watch: {
    // 监听传入的row的数据变化
    // currentRow(newVal) {
    //   // console.log(newVal)
    //   // 数据回显, 从vuex中获取到当前回显的数据
    //   // console.log(newVal)
    //   // console.log(this.headimgList)
    //   this.stuForm = newVal // 回显变化的row
    //   this.headimgList = [{ url: newVal.headimgurl }] // 回显头像
    //   // 编辑的时候让上传的头像个数变为2
    //   this.limit = 2
    // },
    currentRow: {
      handler(newVal) {
        // console.log(newVal)
        // 数据回显, 从vuex中获取到当前回显的数据
        // console.log(newVal)
        // console.log(this.headimgList)
        this.stuForm = newVal // 回显变化的row
        this.headimgList = [{ url: newVal.headimgurl }] // 回显头像
        // 编辑的时候让上传的头像个数变为2
        this.limit = 2
        // 监听编辑时是否做出修改
        if (newVal) {
          this.count++
          console.log(this.count)
        }
      },
      deep: true
    }
  }
}
</script>
<style>
.uploadAvatar {
  text-align: left;
}
.el-upload-list__item.is-success,
.el-upload--picture-card {
  width: 100px !important;
  height: 100px !important;
  line-height: 100px !important;
}
.el-dialog__header {
  padding: 0 !important;
  line-height: 60px;
}
</style>
